<template>
	<view class="box">
		<view class="head">
			<u-icon name="account" size="45"></u-icon>
			<u-button hover-class="none">我的设备</u-button>
		</view>
		<view style="position: sticky;top: 6vh;z-index: 1;">
			<u-subsection :list="namelist" v-model="current" active-color="#2084ff" @change="toChange" bgColor="white">
			</u-subsection>
		</view>
		<view class="friends" v-if="current === 0">
			<view class="friendsTitle">
				<u-avatar
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XpnLCXvNjh1PjkvAr-t6nAAAAA?w=192&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7"
					size="60"></u-avatar>
				<text class="username">楼下邻居王美丽</text>
				<u-icon name="more-dot-fill" color="black" size="28" style="padding-left: 60%;"></u-icon>
			</view>
			<text class="comment">这次的康复很不错！</text>
			<u-image width="100%" height="400rpx" src="https://s1.ax1x.com/2023/03/20/pptokdA.png"
				border-radius="20rpx"></u-image>
			<view class="time">
				<text>您的好友</text>
				<text>2小时前发布</text>
			</view>
			<view class="like">
				<view v-for="(item,index) in likeList" :key="index">
					<u-icon :name="item.icon" color="black" size="30"></u-icon>
					<text style="font-size: 30rpx;">{{item.name}}</text>
				</view>
			</view>
			<view class="mycomment">
				<u-avatar
					src="https://tse4-mm.cn.bing.net/th/id/OIP-C.mtxzyQ1-noYpTUi5Nkq37AAAAA?w=209&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7"
					size="60"></u-avatar>
				<u-input v-model="value" type="text" :border="true" style="margin-left: 2%;width: 90%;" height="60"
					placeholder="写评论..." />
			</view>
			<view style="width: 100%;height: 40rpx;"></view>
		</view>
		<view class="friends" v-if="current === 0">
			<view class="friendsTitle">
				<u-avatar
					src="https://tse4-mm.cn.bing.net/th/id/OIP-C.q7VFtf5fSePQqf5MbJEY5QAAAA?w=209&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7"
					size="60"></u-avatar>
				<text class="username">高端养老中心</text>
				<u-icon name="more-dot-fill" color="black" size="28" style="padding-left: 60%;"></u-icon>
			</view>
			<text class="comment">杭州养老，等您来！</text>
			<u-image width="100%" height="400rpx" src="https://s1.ax1x.com/2023/03/20/pptTq41.png"
				border-radius="20rpx"></u-image>
			<view class="time">
				<text>您的好友</text>
				<text>2小时前发布</text>
			</view>
			<view class="like">
				<view v-for="(item,index) in likeList" :key="index">
					<u-icon :name="item.icon" color="black" size="30"></u-icon>
					<text style="font-size: 30rpx;">{{item.name}}</text>
				</view>
			</view>
			<view class="mycomment">
				<u-avatar
					src="https://tse4-mm.cn.bing.net/th/id/OIP-C.mtxzyQ1-noYpTUi5Nkq37AAAAA?w=209&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7"
					size="60"></u-avatar>
				<u-input v-model="value" type="text" :border="true" style="margin-left: 2%;width: 90%;" height="60"
					placeholder="写评论..." />
			</view>
			<view style="width: 100%;height: 40rpx;"></view>
		</view>

		<view v-else>
			<view class="wrap">
				<u-swiper :list="swiperList" height=400></u-swiper>
			</view>
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
							</u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-price">
								{{item.price}}浏览
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									<u-avatar
										src="https://tse1-mm.cn.bing.net/th/id/OIP-C.7h9wcySsOrfNHTk1wJV2JQAAAA?w=200&h=200&c=7&r=0&o=5&dpr=1.3&pid=1.7"
										size="45"></u-avatar>
									<text>{{item.people}}</text>
								</view>
								<view class="demo-tag-text">
									<u-icon name="more-dot-fill" color="black" size="28"></u-icon>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
							</u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-price">
								{{item.price}}浏览
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									<u-avatar
										src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UzMtNg2KaGmUlx5uP8XZ_AAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7"
										size="45"></u-avatar>
									<text>{{item.people}}</text>
								</view>
								<view class="demo-tag-text">
									<u-icon name="more-dot-fill" color="black" size="28"></u-icon>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				namelist: [{
						name: '好友圈',
					},
					{
						name: '养老院'
					}
				],
				loadStatus: 'loadmore',
				flowList: [],
				current: 0,
				value: '',
				likeList: [{
						icon: 'thumb-up',
						name: '133'
					},
					{
						icon: 'chat',
						name: '评论'
					},
					{
						icon: 'star',
						name: '收藏'
					},
					{
						icon: 'zhuanfa',
						name: '分享'
					}
				],
				swiperList: [{
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.fo8nIGXXmEfnNJzuED9DWgHaE8?w=279&h=186&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.cIaJRIF9BCtEQKMFYFt39AHaE4?w=250&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Sfs4ZoBF6xQx_DIldMknYQHaEn?w=271&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					}
				],
				list: [{
						price: 35,
						people: '高端养老',
						title: '四季春养老',
						image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4b-TPwdf7uH1Q0m6Hp9BoQHaGZ?w=182&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						price: 75,
						people: '小张',
						title: '五星奢侈养老体验',
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.SusplURNngFpKgw-HwdfJAHaEK?w=270&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						price: 385,
						people: '小黄',
						title: '夕阳红养老',
						image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.XHymp129x4HkE-mHcTTU-wHaE7?w=258&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						price: 784,
						people: '小王',
						title: '养生堂',
						image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C._sNbVvje0JpwG2Rb-IUgygHaEK?w=266&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						price: 7891,
						people: '小彭',
						title: '晴日尊贵养老',
						image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Z7ap1MaYCGh_PtupCTYB4gHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					},
					{
						price: 2341,
						people: '男哥',
						title: '父母家乡',
						image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.hUcTNLSLeBZmqEXqF8Z77gHaE8?w=269&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					}
				]
			}
		},
		methods: {
			toChange(index) {
				this.current = index
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: white;

		.head {
			width: 100%;
			height: 6vh;
			display: flex;
			justify-content: space-between;
			background-color: #ff9900;
			position: sticky;
			top: 0;
			z-index: 1;

			u-icon {
				padding-left: 7%;
			}

			u-button {
				width: 20%;
				padding-top: 1%;
				padding-right: 7%;
			}
		}

		.friends {
			width: 90%;
			margin: 5% auto auto auto;
			height: 55%;
			display: flex;
			flex-direction: column;
			background-color: white;

			.friendsTitle {
				display: flex;
				width: 100%;
				height: 10%;

				.username {
					font-size: 25rpx;
					padding-top: 2%;
					padding-left: 1%;
				}
			}

			.comment {
				font-size: 30rpx;
				padding: 0;
				margin: 0;
			}

			.time {
				display: flex;
				justify-content: space-between;
				padding-top: 1%;

				text {
					font-size: 25rpx;
				}
			}

			.like {
				display: flex;
				justify-content: space-between;
				padding-top: 1%;
			}

			.mycomment {
				display: flex;
				width: 100%;
				height: 10%;
				padding-top: 2%;
			}
		}

		.wrap {
			padding: 40rpx;
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep button.u-btn--default {
		height: 80%;
	}
</style>
<style lang="scss" scoped>
	.demo-warter {
		// border: 0.5pt solid rgba(144, 144, 144, 0.25);
		border-radius: 8px;
		margin: 0 2% 20% 2% ;
		background-color: #ffffff;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.demo-tag-owner {
		// background-color: $u-type-error;
		// color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 4rpx 4rpx 0;
		border-radius: 50rpx;
		font-size: 25rpx;
		line-height: 1;
	}

	.demo-tag-text {
		// border: 1px solid $u-type-primary;
		// color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 25rpx;
		color: gray;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
